import * as React from "react";
import { Button, Input, Select } from "antd";
import { WebVariable } from "../../../../../../data/WebVariable";
import { getComponentType } from "../../../deviceseversapi";
import "./index.less";
const { Option } = Select;
export interface SearchConditionProps {
  onSubmit: (date: any) => any;
}

export interface SearchConditionState {
  terVal: string;
  devVal: string;
  energyType: string;
  isLoad: string;
  typeId: string;
  subItem: any[];
}

class SearchCondition extends React.Component<
  SearchConditionProps,
  SearchConditionState
> {
  public dataJson: any = {};
  state = {
    terVal: "",
    devVal: "",
    energyType: "",
    isLoad: "",
    typeId: "",
    subItem: [],
  };
  render() {
    return (
      <div className="bare_body" style={{ padding: 16, paddingTop: 0 }}>
        <span style={{ paddingLeft: 26 }}>设备：</span>
        <div className="changeType_btn d_inlineFlex">
          <Input
            className="input"
            placeholder="请输入设备信息"
            value={this.state.devVal}
            onChange={(e) => {
              this.setState({ devVal: e.target.value });
            }}
          />
        </div>
        <span style={{ paddingLeft: 26 }}>终端：</span>
        <div className="changeType_btn d_inlineFlex">
          <Input
            className="input"
            placeholder="请输入终端信息"
            value={this.state.terVal}
            onChange={(e) => {
              this.setState({ terVal: e.target.value });
            }}
          />
        </div>
        <span style={{ paddingLeft: 26 }}>分项：</span>
        <Select
          placeholder="请选择分项"
          style={{ width: 120 }}
          value={this.state.typeId}
          onChange={(e: string) => {
            this.setState({ typeId: e });
          }}
        >
          {this.state.subItem.map((province: any) => (
            <Option key={province.id + ""} value={province.id + ""}>
              {province.name}
            </Option>
          ))}
        </Select>
        <span style={{ paddingLeft: 26 }}>能源类型：</span>
        <Select
          placeholder="请选择能源类型"
          style={{ width: 80 }}
          value={this.state.energyType}
          onChange={(e: string) => {
            this.setState({ energyType: e });
          }}
        >
          {WebVariable.categoryType.map((item: any) => {
            return (
              <Option value={item.key} key={item.key}>
                {item.label}
              </Option>
            );
          })}
        </Select>
        <span style={{ paddingLeft: 26 }}>装载：</span>
        <Select
          placeholder="请选择装载类型"
          style={{ width: 80 }}
          value={this.state.isLoad}
          onChange={(e: string) => {
            this.setState({ isLoad: e });
          }}
        >
          <Option value="0" key="0">
            未装载
          </Option>
          <Option value="1" key="1">
            已装载
          </Option>
        </Select>
        <Button
          type="primary"
          className="l_distance"
          onClick={() => {
            this.getCondition();
          }}
        >
          查询
        </Button>
        <Button
          className="l_distance"
          onClick={() => {
            this.setState({
              terVal: "",
              devVal: "",
              energyType: "",
              isLoad: "",
              typeId: "",
            });
          }}
        >
          重置
        </Button>
      </div>
    );
  }
  componentWillMount() {
    this.agreement();
  }
  getCondition() {
    let { devVal, terVal, typeId, energyType, isLoad } = this.state;
    let queryData = {
      devVal,
      terVal,
      typeId,
      energyType,
      isLoad,
      isBing: "",
      isFictitious: "0",
      isLineMain: "",
    };
    this.props.onSubmit(queryData);
  }
  //获取分项类型下拉
  async agreement() {
    let res: any = await getComponentType().catch((err) => {
      console.log(err);
    });
    const json: any = res;
    if (res) {
      this.setState({
        subItem: json.data,
      });
    }
  }
}

export default SearchCondition;
